<template>
    <div id="cmt-box">
        <h4>发表评论</h4>

        <hr>

        <textarea maxlength="120" placeholder="请输入要评论的内容（120字之内）" v-model="comment"></textarea>

        <mt-button class="btn_cmt" type="primary" size="large" @click = "addComment">发表评论</mt-button>

        <div class="cmt_container" v-for="(item, index) in comentList" :key="item.add_time + Math.random()*1000">
            <ul>
                <li>
                    <p>
                        <span>第{{ index+1 }}楼&nbsp;&nbsp;用户：{{ item.user_name }}</span>
                        <span>发表时间：{{ item.add_time | dateFormat }}</span>
                    </p>
                    <p>
                        {{ item.content | commentFormat("该用户未发表评论") }}
                    </p>
                </li>
            </ul>
        </div>

        <mt-button class="btn_more" type="danger" plain size="large" @click = "loadMore">加载更多</mt-button>
    </div>
</template>


<script>
import { Toast } from "mint-ui" 

export default {
   data: function(){
       return {
           pageIndex: 1,
           comentList: [],
           comment: ""  //这是用户评论框的内容
       }
   },
   created(){
       this.getComentList();
   },
   methods: {
       getComentList(){     //获取评论数据
           this.$http.get("api/getcomments/"+ this.newId +"?pageindex=" + this.pageIndex).then((res) => {
               if(res.body.status === 0){
                   this.comentList.push(...res.body.message)
               }else{
                   Toast("获取评论列表失败")
               }
           })
       },
       loadMore(){        //点击加载更多按钮事件
           this.pageIndex++;
           this.getComentList();
       },
       addComment(){        //点击加载发表评论按钮事件
            if(this.comment.trim().length !== 0){
                this.$http.post("api/postcomment/" + this.newId, { content: this.comment.trim() }).then((res) => {
                    if(res.body.status === 0){
                        // 评论提交成功 
                        Toast({
                            message: '发表成功',
                            iconClass: 'icon icon-success',
                            duration: 1000
                        });
                        this.comentList.unshift({
                            add_time: new Date(),
                            content: this.comment,
                            user_name: "匿名用户"
                        })
                        this.comment = ""
                    }else{
                        Toast("发表评论失败")
                    }
                })

            }else{
                Toast("评论内容不能为空")
            }
       }
   },
   props: ["newId"],
   filters: {
       commentFormat(dataStr, tip){
           if(!dataStr.trim()){
               return tip;
           }
           return dataStr
       }
   }
}
</script>


<style lang="less" scoped>
    #cmt-box{
        margin-top: 20px;

        textarea{
            font-size: 12px;
            margin-bottom: 5px;
        }

        .btn_cmt,.btn_more{
            margin-bottom: 20px;
        }
        .cmt_container{
            ul{
                padding: 0;
                list-style: none;
                font-size: 13px;
                li{
                    margin-bottom: 10px;
                    p:nth-child(1){
                        display: flex;
                        justify-content: space-between;
                        color: #222;
                    }
                    p:nth-child(2){
                        text-indent: 2em;
                    }
                }
            }
        }
    }
</style>